<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>个人信息</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base th:href="@{/}"/>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="@{/css/Managerstyle.css}"/>
<script th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<style>
	.father{
		width:100%;	
		text-align: center;	
	}
	.father>div{
		float:left;	
		display:inline-block;
		text-align: center;
		width:50%;
	}
	.contain{
		text-align: center;
	}
</style>
</head>
<body>
	<div class="contain">
	<h3>个人信息</h3>
	    <div class="father" sec:authorize="hasRole('student')">
	    	<form id="form1" method="post" enctype="multipart/form-data"
			       action="stu/upload" class="form-inline">
			       <input type="text" id="avator" th:value="${session.loginStudent.img}" style="display: none; " />
	        	<label  for="file-input" >
	        		<img class="img-circle" id="img" th:src="@{|/img/${session.loginStudent.img}|}" 
	                         th:title="${session.loginStudent.srollno}" width="70" height="70" style="cursor: pointer;"><hr>
                </label>
                <input id="file-input" name="pfile" style="opacity:0;width:0;height:0;" type="file"/>
	        </form>
	        <div>
	        	学号：<span th:text="${session.loginStudent.srollno}"></span><hr>
	    		姓名：<span th:text="${session.loginStudent.sname}"></span><hr>
            	性别：<span th:text="${session.loginStudent.sgender}"></span><hr>
               	班级：<span th:text="${session.loginStudent.batch.bname}"></span><hr>
	        </div>
	        <div>
				出生日期：<span th:text="${session.loginStudent.birthday}"></span><hr>
				入学年份：<span th:text="${session.loginStudent.enrolment}"></span><hr>
				籍贯：<span th:text="${session.loginStudent.location}"></span><hr>
				政治面貌：<span th:text="${session.loginStudent.political}"></span><hr>
	        </div> 
	                   
         </div>
         <div class="father" sec:authorize="hasRole('teacher')">
         	<div>
        		教师号：<span th:text="${loginTeacher.tid}"></span> <hr>
	                    姓名：<span th:text="${loginTeacher.tname}"></span><hr>
	                    性别：<span th:text="${loginTeacher.tgender}"></span><hr>
	                    出生日期：<span th:text="${loginTeacher.birthday}"></span><hr>
         	</div>
	        <div>
	        	所属学院：<span th:text="${acadamy}"></span><hr>
	                    简介：<span th:text="${loginTeacher.description}"></span><hr>
	                    邮箱：<span th:text="${loginTeacher.temail}"></span><hr>
	        </div>    
	                    
         </div>
         <div style="clear: both;"></div>
         <a sec:authorize="hasRole('teacher')" th:href="@{|/teach/modifyTeacherInfo/${loginTeacher.tid}|}">
          <button class="btn btn-info btn-sm fixed-right">修改信息</button></a>
          <button id="uploadBtn" sec:authorize="hasRole('student')" class="btn btn-info btn-sm fixed-right">保存头像</button>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a sec:authorize="hasRole('teacher')"  href="teach/toModifyPassword" class="btn btn-warning btn-sm fixed-right">修改密码</a>
          <a sec:authorize="hasRole('student')"  href="stu/toModifyPassword" class="btn btn-warning btn-sm fixed-right">修改密码</a>
	</div>
	
	<script>
	$(document).ready(function(){
		 
		//处理id为uploadBtn的点击事件
		$("#uploadBtn").click(function(){
			//如果是ajax提交包含上传文件的请求
			//需要用一个FormData对象封装表单数据
			var formData=new FormData($("#form1")[0]);
			
			console.log(formData);
			 $.ajax({
				url:'stu/upload2',
				type:'POST',
				data: formData,
				processData: false, //不使用默认方式处理上传的数据，默认会转成字符串
				contentType: false, //不使用默认的内容类型作为发送的数据的类型
				success: function(imgPath){ //通过方法参数获取返回的图片路径
					$("#img").attr("src","img"+imgPath);
				},
				error: function(req,status,error){
					alert("请求处理出错!!!"+error);
				}
			}); 
			
		});
	});
	</script>
</body>
</html>